<template>
  <div>
    <!-- 1.get 请求
        2.get rest请求
        3.post请求
        4.上传
        5.下载-->

    <div>

      <el-form  :inline="true" :model="getBody" class="demo-form-inline">
        <el-tag>get请求：</el-tag>
        <el-form-item label="姓名">
          <el-input v-model="getBody.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="爱好">
          <el-input v-model="getBody.hobby" placeholder="请输入爱好"></el-input>
        </el-form-item>

        <el-form-item >
          <el-button type="primary" @click="getSend">发送请求</el-button>
        </el-form-item>

      </el-form>


      <el-form :inline="true" :model="getRestBody" class="demo-form-inline">
        <el-tag>getRest请求：</el-tag>
        <el-form-item label="姓名">
          <el-input v-model="getRestBody.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="爱好">
          <el-input v-model="getRestBody.hobby" placeholder="请输入爱好"></el-input>
        </el-form-item>

        <el-form-item >
          <el-button type="primary" @click="getRestSend">发送请求</el-button>
        </el-form-item>

      </el-form>

      <el-form :inline="true" :model="postBody" class="demo-form-inline">
        <el-tag>post请求：</el-tag>
        <el-form-item label="姓名">
          <el-input v-model="postBody.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="爱好">
          <el-input v-model="postBody.hobby" placeholder="请输入爱好"></el-input>
        </el-form-item>

        <el-form-item >
          <el-button type="primary" @click="postSend">发送请求</el-button>
        </el-form-item>

      </el-form>



      <el-form>
        <el-tag>下载文件：</el-tag>
        <el-form-item label="文件名">
          <el-input v-model="downfilename" placeholder="请输入下载文件名"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="downLoadFile">下载</el-button>
        </el-form-item>

      </el-form>


      <el-form>
        <el-tag>上传文件：</el-tag>

        <el-form-item >
          <el-upload
            class="upload-demo"
            :action="uploadURL"
          drag
            :before-upload="beforeAvatarUpload"
            :data="uploadData"
            :on-success="onsuccess"
            multiple
            :headers="uploadheaders"
          >

            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">不能超过2m</div>
          </el-upload>
        </el-form-item>

      </el-form>


      <hr>

      <el-form>
        <el-tag>日终模拟：</el-tag>

        <el-form-item >
          当前日终时间:{{dayEnd.localDate}}  状态:{{dayEnd.status==1?'正常':(dayEnd.status==2?'异常':'日终中')}}
          <el-button type="primary" @click="getDayInfo">刷新</el-button>
        </el-form-item>


        <el-form-item >

          <el-button type="primary" @click="dayAdd">日终</el-button>
          <el-button type="primary" @click="repair">日终修复</el-button>

        </el-form-item>

      </el-form>



    </div>

  </div>

</template>

<script>

  import { getReq,restGetReq,postReq,download,upload,getDayInfo,dayAdd,repair} from '../../api/practise'
    export default {
        name: "Practise",
      data(){
          return{
            getBody:{
              name:'',
              hobby:'',
            },
            getRestBody:{
              name:'',
              hobby:'',
            },
            postBody:{
              name:'',
              hobby:'',
            },

            dayEnd:{
              localDate:'',
              status:0,
            },
            downfilename:'',
            uploadData:{type:1},
            uploadURL:'',
            uploadheaders:{
              token:localStorage.getItem('token')
            }
          }
      },
      methods:{

          getDayInfo(){
            getDayInfo().then(res=>{
              this.dayEnd = res.data
            })
          },
        dayAdd(){
            dayAdd().then(res=>{
              this.dayEnd = res.data
            })
        },
        repair(){
          repair().then(res=>{
            this.dayEnd = res.data
          })
        },



        onsuccess(){
          this.$message.info('上传成功')
        },

        beforeAvatarUpload(file) {

          const isLt2M = file.size / 1024 / 1024 < 2;


          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isLt2M;
        },

        getSend(){
            getReq(this.getBody).then(res=>{
              console.log(res.data)
            }).catch(err=>{
              console.log(err.data)
            })


        },
        getRestSend(){
          restGetReq(this.getRestBody.name,this.getRestBody.hobby).then(res=>{
            console.log(res.data)
          }).catch(err=>{
            console.log(err.data)
          })

        },
        postSend(){

          postReq(this.postBody).then(res=>{
            console.log(res.data)
          }).catch(err=>{
            console.log(err.data)
          })
        },
        downLoadFile(){
          let param = {
            fileName : this.downfilename
          }

          if (param.fileName == ''){
            this.$notify({
              title: '请输入名称',
              message: h('i', { style: 'color: teal'}, `请输入名称`)
            });
          } else{

            download( this.downfilename)
              .then(rep=>{
                console.log(rep)

                let aTag = document.createElement('a');
                let blob = new Blob([rep.data]);　　// 这个content是下载的文件内容，自己修改
                aTag.download = this.downfilename;　　　　　　// 下载的文件名
                aTag.href = URL.createObjectURL(blob)

                aTag.click();
                URL.revokeObjectURL(blob)
              })
          }





        },


      },
      created(){
          this.uploadURL =   upload();
          this.getDayInfo();

      },
    }
</script>

<style scoped>

</style>
